<template>
  <view class="applicationList">
    <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
    <me-tabs v-model="tabs.index" :height="80" :tabs="tabs.list" fixed></me-tabs>
    <swiper :current="tabs.index" :style="{ height: swiper.height }" @change="swiperChange">
      <swiper-item v-for="(tab, i) in tabs.list" v-if="option" :key="i">
        <mescroll-item
          ref="mescrollItem"
          :height="swiper.height"
          :i="i"
          :index="tabs.index"
          :option="option"
          :tabs="tabs.list"
        ></mescroll-item>
      </swiper-item>
    </swiper>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import MescrollItem from './mescroll-swiper-item.vue'
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  components: { MescrollItem },
  data() {
    return {
      tabs: {
        index: 0,
        list: [
          { name: this.$t('待审批') },
          { name: this.$t('已审批') },
          { name: this.$t('抄送我') }
        ]
      },
      swiper: {
        height: '100%'
      },
      option: '' //当前页面信息，从哪里点进的
    }
  },
  onLoad(option) {
    // this.swiper.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'
    this.option = option
    //设置标题
    uni.setNavigationBarTitle({
      title: this.$t(option.name)
    })
    //判断从哪里来
    this.whereJudge()
  },
  methods: {
    //判断从哪里来
    whereJudge() {
      if (this.option.name === '审批处理') {
        this.tabs.list = [
          { name: this.$t('待审批') },
          { name: this.$t('已审批') },
          { name: this.$t('抄送我') }
        ]
      } else if (this.option.name === '授权处理') {
        this.tabs.list = [{ name: this.$t('待授权') }, { name: this.$t('已授权') }]
      } else if (this.option.name === '审计处理') {
        this.tabs.list = [{ name: this.$t('待审计') }, { name: this.$t('已审计') }]
      } else if (this.option.name === '我的申请') {
        this.tabs.list = [{ name: this.$t('待完结') }, { name: this.$t('已完结') }]
      }
    },
    // 轮播菜单
    swiperChange(e) {
      this.tabs.index = e.detail.current
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationList {
  background-color: #f0f0f0;
  height: 100%;
}
</style>
